<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优购商城 - 您的在线购物首选</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        :root {
            --primary: #3498db;
            --secondary: #2ecc71;
            --accent: #e74c3c;
            --dark: #2c3e50;
            --light: #ecf0f1;
            --gray: #95a5a6;
        }
        
        body {
            background-color: #f9f9f9;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        /* 导航栏样式 */
        header {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
            color: var(--primary);
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 25px;
        }
        
        .nav-links a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 500;
            transition: color 0.3s;
        }
        
        .nav-links a:hover {
            color: var(--primary);
        }
        
        .nav-icons {
            display: flex;
            align-items: center;
        }
        
        .nav-icon {
            margin-left: 20px;
            font-size: 20px;
            cursor: pointer;
            position: relative;
        }
        
        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background-color: var(--accent);
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 横幅样式 */
        .banner {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                        url('https://images.unsplash.com/photo-1607082350899-7e105aa886ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 80px 0;
            text-align: center;
            border-radius: 10px;
            margin-bottom: 40px;
        }
        
        .banner h2 {
            font-size: 36px;
            margin-bottom: 15px;
        }
        
        .banner p {
            font-size: 18px;
            margin-bottom: 25px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* 主要内容区域 */
        .main-content {
            padding: 30px 0;
        }
        
        .section-title {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--light);
            color: var(--dark);
        }
        
        /* 产品网格 */
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 25px;
            margin-top: 20px;
        }
        
        .product-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
        }
        
        .product-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .product-info {
            padding: 15px;
        }
        
        .product-title {
            font-size: 16px;
            margin-bottom: 10px;
            height: 40px;
            overflow: hidden;
        }
        
        .product-price {
            font-weight: bold;
            color: var(--accent);
            font-size: 18px;
            margin-bottom: 15px;
        }
        
        .btn {
            display: inline-block;
            padding: 8px 15px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #2980b9;
        }
        
        .btn-secondary {
            background-color: var(--secondary);
        }
        
        .btn-secondary:hover {
            background-color: #27ae60;
        }
        
        /* 购物车样式 */
        .cart-modal {
            display: none;
            position: fixed;
            top: 0;
            right: 0;
            width: 350px;
            height: 100%;
            background-color: white;
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            overflow-y: auto;
        }
        
        .cart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid var(--light);
        }
        
        .close-cart {
            font-size: 24px;
            cursor: pointer;
        }
        
        .cart-items {
            padding: 15px;
        }
        
        .cart-item {
            display: flex;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--light);
        }
        
        .cart-item-image {
            width: 70px;
            height: 70px;
            object-fit: cover;
            border-radius: 4px;
        }
        
        .cart-item-details {
            flex: 1;
            padding-left: 15px;
        }
        
        .cart-item-title {
            font-size: 14px;
            margin-bottom: 5px;
        }
        
        .cart-item-price {
            font-weight: bold;
            color: var(--accent);
        }
        
        .cart-item-quantity {
            display: flex;
            align-items: center;
            margin-top: 5px;
        }
        
        .quantity-btn {
            width: 25px;
            height: 25px;
            background-color: var(--light);
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .quantity-input {
            width: 40px;
            text-align: center;
            margin: 0 5px;
            border: 1px solid var(--light);
            border-radius: 4px;
            padding: 2px;
        }
        
        .cart-total {
            padding: 15px;
            border-top: 1px solid var(--light);
            font-weight: bold;
            font-size: 18px;
            display: flex;
            justify-content: space-between;
        }
        
        .checkout-btn {
            display: block;
            width: 100%;
            padding: 12px;
            margin-top: 15px;
            background-color: var(--secondary);
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .checkout-btn:hover {
            background-color: #27ae60;
        }
        
        /* 用户登录/注册模态框 */
        .auth-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .auth-form {
            background-color: white;
            width: 400px;
            max-width: 90%;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .auth-tabs {
            display: flex;
        }
        
        .auth-tab {
            flex: 1;
            padding: 15px;
            text-align: center;
            background-color: var(--light);
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .auth-tab.active {
            background-color: white;
            font-weight: bold;
        }
        
        .auth-content {
            padding: 25px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        
        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--light);
            border-radius: 4px;
        }
        
        /* 页脚样式 */
        footer {
            background-color: var(--dark);
            color: white;
            padding: 40px 0 20px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .footer-section h3 {
            margin-bottom: 15px;
            font-size: 18px;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 8px;
        }
        
        .footer-links a {
            color: var(--light);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-links a:hover {
            color: white;
        }
        
        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 14px;
            color: var(--light);
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            
            .products-grid {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }
            
            .cart-modal {
                width: 100%;
            }
            
            .banner {
                padding: 50px 0;
            }
            
            .banner h2 {
                font-size: 28px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="container">
            <nav class="navbar">
                <div class="logo">优购商城</div>
                <ul class="nav-links">
                    <li><a href="#" class="active">首页</a></li>
                    <li><a href="#">商品分类</a></li>
                    <li><a href="#">热销商品</a></li>
                    <li><a href="#">新品上市</a></li>
                    <li><a href="#">关于我们</a></li>
                </ul>
                <div class="nav-icons">
                    <div class="nav-icon" id="user-icon">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="nav-icon" id="cart-icon">
                        <i class="fas fa-shopping-cart"></i>
                        <span class="cart-count">0</span>
                    </div>
                </div>
            </nav>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <div class="container">
            <!-- 横幅区域 -->
            <section class="banner">
                <h2>夏季大促销</h2>
                <p>全场商品低至5折，满299元包邮</p>
                <button class="btn">立即购买</button>
            </section>

            <!-- 产品展示 -->
            <section class="products">
                <h2 class="section-title">热门商品</h2>
                <div class="products-grid" id="products-grid">
                    <!-- 产品将通过JavaScript动态生成 -->
                </div>
            </section>
        </div>
    </main>

    <!-- 购物车侧边栏 -->
    <div class="cart-modal" id="cart-modal">
        <div class="cart-header">
            <h3>购物车</h3>
            <span class="close-cart" id="close-cart">&times;</span>
        </div>
        <div class="cart-items" id="cart-items">
            <!-- 购物车商品将通过JavaScript动态生成 -->
        </div>
        <div class="cart-total">
            <span>总计:</span>
            <span id="cart-total-price">¥0.00</span>
        </div>
        <button class="checkout-btn" id="checkout-btn">去结算</button>
    </div>

    <!-- 用户登录/注册模态框 -->
    <div class="auth-modal" id="auth-modal">
        <div class="auth-form">
            <div class="auth-tabs">
                <div class="auth-tab active" id="login-tab">登录</div>
                <div class="auth-tab" id="register-tab">注册</div>
            </div>
            <div class="auth-content">
                <form id="login-form">
                    <div class="form-group">
                        <label for="login-email">邮箱</label>
                        <input type="email" id="login-email" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="login-password">密码</label>
                        <input type="password" id="login-password" class="form-control" required>
                    </div>
                    <button type="submit" class="btn" style="width: 100%;">登录</button>
                </form>
                <form id="register-form" style="display: none;">
                    <div class="form-group">
                        <label for="register-name">姓名</label>
                        <input type="text" id="register-name" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="register-email">邮箱</label>
                        <input type="email" id="register-email" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="register-password">密码</label>
                        <input type="password" id="register-password" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="register-confirm">确认密码</label>
                        <input type="password" id="register-confirm" class="form-control" required>
                    </div>
                    <button type="submit" class="btn" style="width: 100%;">注册</button>
                </form>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>关于我们</h3>
                    <p>优购商城致力于为消费者提供优质的商品和便捷的购物体验。</p>
                </div>
                <div class="footer-section">
                    <h3>客户服务</h3>
                    <ul class="footer-links">
                        <li><a href="#">帮助中心</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">退换货政策</a></li>
                        <li><a href="#">配送信息</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>支付方式</h3>
                    <ul class="footer-links">
                        <li><a href="#">支付宝</a></li>
                        <li><a href="#">微信支付</a></li>
                        <li><a href="#">银联支付</a></li>
                        <li><a href="#">信用卡</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>关注我们</h3>
                    <ul class="footer-links">
                        <li><a href="#">微信公众号</a></li>
                        <li><a href="#">微博</a></li>
                        <li><a href="#">抖音</a></li>
                        <li><a href="#">小红书</a></li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                &copy; 2023 优购商城 版权所有
            </div>
        </div>
    </footer>

    <script>
        // 模拟产品数据，使用来自Unsplash的真实产品图片
        const products = [
            { 
                id: 1, 
                name: "无线蓝牙耳机", 
                price: 299, 
                image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
            },
            { 
                id: 2, 
                name: "智能手机", 
                price: 1999, 
                image: "https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
            },
            { 
                id: 3, 
                name: "笔记本电脑", 
                price: 5999, 
                image: "https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
            },
            { 
                id: 4, 
                name: "智能手表", 
                price: 899, 
                image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
            },
            { 
                id: 5, 
                name: "平板电脑", 
                price: 2499, 
                image: "https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
            },
            { 
                id: 6, 
                name: "数码相机", 
                price: 3599, 
                image: "https://images.unsplash.com/photo-1502920917128-1aa500764cbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
            },
            { 
                id: 7, 
                name: "游戏手柄", 
                price: 399, 
                image: "https://images.unsplash.com/photo-1606144042614-b2417e99c4e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
            },
            { 
                id: 8, 
                name: "机械键盘", 
                price: 599, 
                image: "https://images.unsplash.com/photo-1587829741301-dc798b83add3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
            }
        ];

        // 购物车数据
        let cart = [];
        let currentUser = null;

        // DOM元素
        const productsGrid = document.getElementById('products-grid');
        const cartIcon = document.getElementById('cart-icon');
        const cartModal = document.getElementById('cart-modal');
        const closeCart = document.getElementById('close-cart');
        const cartItems = document.getElementById('cart-items');
        const cartTotalPrice = document.getElementById('cart-total-price');
        const checkoutBtn = document.getElementById('checkout-btn');
        const userIcon = document.getElementById('user-icon');
        const authModal = document.getElementById('auth-modal');
        const loginTab = document.getElementById('login-tab');
        const registerTab = document.getElementById('register-tab');
        const loginForm = document.getElementById('login-form');
        const registerForm = document.getElementById('register-form');
        const cartCount = document.querySelector('.cart-count');

        // 初始化页面
        function init() {
            renderProducts();
            setupEventListeners();
            updateCartCount();
        }

        // 渲染产品列表
        function renderProducts() {
            productsGrid.innerHTML = '';
            products.forEach(product => {
                const productCard = document.createElement('div');
                productCard.className = 'product-card';
                productCard.innerHTML = `
                    <img src="${product.image}" alt="${product.name}" class="product-image">
                    <div class="product-info">
                        <h3 class="product-title">${product.name}</h3>
                        <div class="product-price">¥${product.price}</div>
                        <button class="btn add-to-cart" data-id="${product.id}">加入购物车</button>
                    </div>
                `;
                productsGrid.appendChild(productCard);
            });
        }

        // 设置事件监听器
        function setupEventListeners() {
            // 购物车相关事件
            cartIcon.addEventListener('click', () => {
                cartModal.style.display = 'block';
                renderCartItems();
            });

            closeCart.addEventListener('click', () => {
                cartModal.style.display = 'none';
            });

            // 添加商品到购物车
            document.addEventListener('click', (e) => {
                if (e.target.classList.contains('add-to-cart')) {
                    const productId = parseInt(e.target.getAttribute('data-id'));
                    addToCart(productId);
                }
            });

            // 用户认证相关事件
            userIcon.addEventListener('click', () => {
                authModal.style.display = 'flex';
            });

            loginTab.addEventListener('click', () => {
                loginTab.classList.add('active');
                registerTab.classList.remove('active');
                loginForm.style.display = 'block';
                registerForm.style.display = 'none';
            });

            registerTab.addEventListener('click', () => {
                registerTab.classList.add('active');
                loginTab.classList.remove('active');
                registerForm.style.display = 'block';
                loginForm.style.display = 'none';
            });

            // 登录表单提交
            loginForm.addEventListener('submit', (e) => {
                e.preventDefault();
                const email = document.getElementById('login-email').value;
                const password = document.getElementById('login-password').value;
                
                // 模拟登录
                currentUser = { email, name: email.split('@')[0] };
                alert(`欢迎回来，${currentUser.name}!`);
                authModal.style.display = 'none';
                loginForm.reset();
            });

            // 注册表单提交
            registerForm.addEventListener('submit', (e) => {
                e.preventDefault();
                const name = document.getElementById('register-name').value;
                const email = document.getElementById('register-email').value;
                const password = document.getElementById('register-password').value;
                const confirmPassword = document.getElementById('register-confirm').value;
                
                if (password !== confirmPassword) {
                    alert('两次输入的密码不一致！');
                    return;
                }
                
                // 模拟注册
                currentUser = { email, name };
                alert(`注册成功，欢迎 ${name}!`);
                authModal.style.display = 'none';
                registerForm.reset();
                
                // 切换到登录表单
                loginTab.click();
            });

            // 结算按钮
            checkoutBtn.addEventListener('click', () => {
                if (cart.length === 0) {
                    alert('购物车是空的！');
                    return;
                }
                
                if (!currentUser) {
                    alert('请先登录！');
                    authModal.style.display = 'flex';
                    cartModal.style.display = 'none';
                    return;
                }
                
                // 模拟支付流程
                alert(`订单提交成功！总金额：${calculateTotal()}元`);
                cart = [];
                updateCartCount();
                renderCartItems();
                cartModal.style.display = 'none';
            });

            // 点击模态框外部关闭
            window.addEventListener('click', (e) => {
                if (e.target === authModal) {
                    authModal.style.display = 'none';
                }
            });
        }

        // 添加商品到购物车
        function addToCart(productId) {
            const product = products.find(p => p.id === productId);
            const existingItem = cart.find(item => item.id === productId);
            
            if (existingItem) {
                existingItem.quantity += 1;
            } else {
                cart.push({
                    id: product.id,
                    name: product.name,
                    price: product.price,
                    image: product.image,
                    quantity: 1
                });
            }
            
            updateCartCount();
            alert(`${product.name} 已添加到购物车！`);
        }

        // 更新购物车数量显示
        function updateCartCount() {
            const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
            cartCount.textContent = totalItems;
        }

        // 渲染购物车商品
        function renderCartItems() {
            cartItems.innerHTML = '';
            
            if (cart.length === 0) {
                cartItems.innerHTML = '<p>购物车是空的</p>';
                cartTotalPrice.textContent = '¥0.00';
                return;
            }
            
            cart.forEach(item => {
                const cartItem = document.createElement('div');
                cartItem.className = 'cart-item';
                cartItem.innerHTML = `
                    <img src="${item.image}" alt="${item.name}" class="cart-item-image">
                    <div class="cart-item-details">
                        <h4 class="cart-item-title">${item.name}</h4>
                        <div class="cart-item-price">¥${item.price}</div>
                        <div class="cart-item-quantity">
                            <button class="quantity-btn decrease" data-id="${item.id}">-</button>
                            <input type="text" class="quantity-input" value="${item.quantity}" readonly>
                            <button class="quantity-btn increase" data-id="${item.id}">+</button>
                        </div>
                    </div>
                `;
                cartItems.appendChild(cartItem);
            });
            
            // 添加数量增减按钮事件
            document.querySelectorAll('.decrease').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const id = parseInt(e.target.getAttribute('data-id'));
                    updateQuantity(id, -1);
                });
            });
            
            document.querySelectorAll('.increase').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const id = parseInt(e.target.getAttribute('data-id'));
                    updateQuantity(id, 1);
                });
            });
            
            cartTotalPrice.textContent = `¥${calculateTotal().toFixed(2)}`;
        }

        // 更新商品数量
        function updateQuantity(productId, change) {
            const item = cart.find(item => item.id === productId);
            if (item) {
                item.quantity += change;
                
                if (item.quantity <= 0) {
                    cart = cart.filter(item => item.id !== productId);
                }
                
                updateCartCount();
                renderCartItems();
            }
        }

        // 计算购物车总价
        function calculateTotal() {
            return cart.reduce((total, item) => total + (item.price * item.quantity), 0);
        }

        // 初始化应用
        init();
    </script>
</body>
</html>